<html>
<head>
	<title>displayModel</title>
	<script type="text/javascript">
	function ajaxRequest(obj,op){
		paramName = obj.parentNode.parentNode.childNodes[1].innerHTML;
		value = obj.parentNode.parentNode.childNodes[2].innerHTML;
		var xmlhttp;
		var csrf_token = "{{ csrf_token }}"
		var postData;
		var tar;
		if (op=="del"||op=="confirm"){
			postData={"paramName":paramName,"value":value,"op":op,"modelType":"{{ modelType }}"};
			tar = "/myDetector/delOneMarkedValue/"
		}else if(op=="reTrain"){
			postData={"op":"reTrain","paramName":"{{ paramName }}","modelType":"{{ modelType }}"}
			tar = "/myDetector/reTrain/"
		}else if(op=="machineClassificationRst"){
			tar="/myDetector/machineClassificationRst/?paramName={{ paramName }}&route={{ paramPath }}"
			window.open(tar)
			return;
		}
		 
		if(window.XMLHttpRequest){
			xmlhttp = new XMLHttpRequest();
		}else{
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.open("POST",tar,true);
		xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
		xmlhttp.setRequestHeader("X-CSRFToken",csrf_token)
		xmlhttp.onreadystatechange = function(){
			if(xmlhttp.readyState == 4 && (xmlhttp.status ==200 || xmlhttp.status ==304)){
				
				if(JSON.parse(xmlhttp.responseText)["response"] == "success" ){
					if (JSON.parse(xmlhttp.responseText)["op"] == "del" || JSON.parse(xmlhttp.responseText)["op"] == "confirm") {
						parentObj = obj.parentNode.parentNode.parentNode;
						parentObj.removeChild(obj.parentNode.parentNode);
					};
					if (JSON.parse(xmlhttp.responseText)["op"] == "reTrain" ) {
						alert("reTrain Finish")
					};
				}
			}
		};
		xmlhttp.send(JSON.stringify(postData));
		
	}
	
	
	</script>
	<style type="text/css">
	#modelName{
		color: red;
		font-size: 50px;
		width: 700px;
		height: 120px;
		margin: 0 auto;
		text-align: center;
		line-height: 120px;
	}
	#detail{}
	#itemName{
		width: 200px;
		color: blue;
	}
	#itemValue{
		width: 800px;
		text-align: left;
	}
	#paramName{
		width: 200px;
		color: blue;
	}
	#paramValue{
		width: 800px;
		text-align: left;
	}
	#markedValue{}
	#funcBtn{
		text-align: center;
		color: red
	}
	#confirmBtn{
		text-align: center;
		color: blue
	}
	#imgContent{
		width: 1000px;
		height: 720px;
		margin: 0 auto;
		text-align: center;
	}
	#upAndDown{
		width: 1000px;
		margin: 0 auto;
		text-align: right;
		color: red;
	}
	caption{
		color: blue;
		font-size: 30px;
	}
	img{
		width: 800px;
		height: 600px
	}
	table{
		width: 1000px;
		margin: 5px auto;
		text-align: center;
		border: 1px solid;
		border-collapse:collapse;
	}
	td{
		border: 1px solid black;
	}
	div span{
		margin-left: 5px;
		margin-right: 5px;
	}
	</style>
</head>
<body>
<p id="modelName">{{modelName}}</p>
<table id="detail">
<caption>Detail of [{{modelName}}]</caption>
{% for info in modelInfo %}
<tr>
<td id="itemName">{{info.0}}</td><td id="itemValue">{{info.1}}</td>
</tr>
{% endfor %}
<tr style="color: red;">
<td id="itemValue" colspan="2" style="text-align: center;"><input type="button" value="reTrain" onClick=ajaxRequest(this,"reTrain")></td>
</tr>
{% if needHJRst %}
<tr style="color: red;">
<td id="itemValue" colspan="2" style="text-align: center;"><input type="button" value="机器分类结果" onClick=ajaxRequest(this,"machineClassificationRst")></td>
</tr>
{% endif %}

</table>
{% if needImg %}
<div id="imgContent">
<img src="\static\{{ paramName }}_20180204_{{ modelType }}.png" align="middel"/>
</div>
{% endif %}
<table id="markedValue">
<caption>recently marked data</caption>
{% for value in markedValue %}
<tr>
<td id="paramName">{{paramName}}</td><td id="paramValue">{{value}}</td><td id="funcBtn"><div onclick=ajaxRequest(this,"del")>del</div></td>
</tr>
{% endfor %}
</table>

<table id="submitedValue">
<caption>recently accept data</caption>
{% for value in submitValue %}
<tr>
<td id="paramName">{{paramName}}</td><td id="paramValue">{{value}}</td><td id="funcBtn"><div onclick=ajaxRequest(this,"confirm")>confirm</div></td>
</tr>
{% endfor %}
</table>
</body>
</html>